<template>
  <div>
    <!-- //搜索框 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-bottom:30px">
      <div style="float:left" id="bigbox">
        <el-form-item label="标题" style="float:left">
          <el-input v-model="formInline.call" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="分类" style="float:left">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option v-for="(v,i) in getSortList" :key="i" :label="v.sortname" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建日期" style="float:left">
          <el-col :span="20">
            <el-date-picker type="date" placeholder="请选择" v-model="formInline.date1" style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item style="float:left">
          <el-button type="primary" @click="searchKonwledge">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </div>
      <el-button type="primary">新增</el-button>
    </el-form>
    <!-- 表单 -->
    <div id="secbox">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="封面" prop="photo">
          <template slot-scope="scope">
            <div class="demo-image">
              <el-image style="width: 100px; height: 100px" :src="scope.row.photo" fit="cover"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="sortName" label="分类"></el-table-column>
        <el-table-column prop="createpeople" label="创建人"></el-table-column>
        <el-table-column prop="createDate" label="创建日期"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="delKnowledge(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <!-- <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
      :total="total" style="margin-top:30px"></el-pagination> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 知识库数据
      tableData: [
        // {
        //   content: "啊哈哈哈哈哈哈哈",
        //   cover: null,
        //   createDate: "2022-05-05 20:06:55",
        //   createpeople: "陈无敌",
        //   id: 1,
        //   knowledgebasesortid: 1,
        //   sortName: "神类",
        //   title: "练气境的十大难题",
        // }
      ],
      // 分类列表
      getSortList: [
        // {
        //   createDate: "2022-04-30 18:10:49",
        //   createpeople: "神王",
        //   id: 1,
        //   sortname: "神类"
        // },
        {

        }
      ],
      // 查询表单
      formInline: {
        title: '',
        sortId: '',
        page: '5',
        creationDate: ''
      }
    };
  },
  methods: {
    handleClick (row) {
      console.log(row);
    },
    // -----------------------------API部分--------------------------------------------------------------
    // 获取知识库列表
    getKnowledge () {
      this.$knowledgeApi.getKnowledge().then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
        }
      })
    },
    // 获取知识库分类
    getSort () {
      this.$knowledgeApi.getSort().then(res => {
        if (res.data.code == 200) {
          this.getSortList = res.data.data
          console.log(res);
        }
      })
    },
    // 多条件查询知识库
    searchKonwledge () {
      this.$knowledgeApi.searchKonwledge(this.formInline).then(res => {
        if (res.data.code == 200) {
          // this.getSortList = res.data.data
          console.log(res);
        }
      })
    },
    // 删除当前行
    delKnowledge (row) {
      this.$knowledgeApi.delKnowledge(row.id).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
        }
      })
    }
  },
  created () { },
  mounted () {
    this.getKnowledge()
    this.getSort()
  },
  computed: {}
};
</script>

<style scoped lang="less">
</style>